<template>
  <div class='table-pagination'>
    <el-pagination
        background
        :current-page='pageNum'
        :page-size="pageSize"
        @size-change ='sizeChange'
        @current-change='currentChange'
        layout="total, prev, pager, next, sizes, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
    props:['total'],
    data(){
        return{
            pageSize: 10,
            pageNum: 1
        }
    },
    methods:{
        sizeChange(val){
            this.pageSize = val
            this.getTableData()
        },
        currentChange(val){
            this.pageNum = val
            this.getTableData()
        },
        getTableData(){
            let pageData = {
                pageSize: this.pageSize,
                pageNum : this.pageNum
            }
            this.$emit('getList',pageData)
        },
    }
}
</script>

<style lang='scss' scoped>
.table-pagination{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
 .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #ffe127;
    color: #606266;
}
</style>